<template>
	<div class="tagMask">
		<div class="allMask" @touchmove.stop.prevent="() => { }">

		</div>

		<div class="prizeDraw">
			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					{{ isEit?'编辑':'新增' }} 标签 <image src="@/static/image/close.png" mode="" class="closeImg"
						@click="backEvent">
					</image>
				</div>
				<div class="prizeDraw-cont">
					<div class="tag_title">

						<u--input placeholder="请输入标签名称 (限20个字)" border="bottom" clearable style="padding: 0;text-align: right;" placeholder-class="placeholders"
							v-model="from.name">
							<u--text text="标签名称：" slot="prefix" class="prefix" type="tips"></u--text>

						</u--input>
					</div>
					<div class="isEitBox">
						<div class="isEitBoxCont" v-if="isEit">

						</div>


						<div class="closeColor">
							<div class="closeColor_left">
								标签类型：
							</div>
							<div class="closeColor_right" @click='isRedMask=!isRedMask'>
								{{from.tagType == 1?'手动标签':'条件标签'}}
								<image src="@/static/image/right.png" mode=""></image>

							</div>
						</div>

						<!-- 条件 -->
						<div class="tagTj" v-if="from.tagType == 2">
							<div class="tagTj_top">
								<span>生效规则：</span>
								<u-radio-group v-model="from.extend.ruleType" placement="row">
									<u-radio activeColor="#0073FF" label="满足所有条件" :name='1' style="margin-left: 8rpx;">
									</u-radio>
									<u-radio activeColor="#0073FF" label="满足任意一条件" :name='2'
										style="margin-left: 32rpx;">
									</u-radio>
								</u-radio-group>
							</div>
							<div class="tagTj_cont">
								<div class="tagTj_cont_items">
									<div class="tagTj_cont_left">
										<image src="@/static/image/xz.png" mode=""
											v-if="from.extend.config[0].switchStatus == 1"
											@click="changeSwitchStatusEvent(0)">
											<image src="@/static/image/wxz.png" mode="" v-else
												@click="changeSwitchStatusEvent(0)">
											</image> <span>累计观看时长≥</span>
									</div>
									<div class="tagTj_cont_right">
										<input type="number" v-model="from.extend.config[0].value" placeholder="请输入"
											min='1' max='9999999' maxlength="7" style="zj-placeholder-class"> 分钟
									</div>
								</div>
								<div class="tagTj_cont_items">
									<div class="tagTj_cont_left">
										<image src="@/static/image/xz.png" mode=""
											v-if="from.extend.config[1].switchStatus == 1"
											@click="changeSwitchStatusEvent(1)">
											<image src="@/static/image/wxz.png" mode="" v-else
												@click="changeSwitchStatusEvent(1)">
												<span>消费总金额≥</span>
									</div>
									<div class="tagTj_cont_right">
										<input type="number" v-model="from.extend.config[1].value" placeholder="请输入"
											min='0.01' max='9999999' maxlength="7" style="zj-placeholder-class"> 元
									</div>
								</div>
								<div class="tagTj_cont_items">
									<div class="tagTj_cont_left">
										<image src="@/static/image/xz.png" mode=""
											v-if="from.extend.config[2].switchStatus == 1"
											@click="changeSwitchStatusEvent(2)">
											<image src="@/static/image/wxz.png" mode="" v-else
												@click="changeSwitchStatusEvent(2)">
												<span>注册时长≥</span>
									</div>
									<div class="tagTj_cont_right">
										<input type="number" v-model="from.extend.config[2].value" placeholder="请输入"
											min='1' max='9999' maxlength="4" style="zj-placeholder-class"> 天
									</div>
								</div>
							</div>
						</div>

					</div>

					<div class="closeColor">
						<div class="closeColor_left">
							标签背景：
						</div>
						<div class="closeColor_right" @click.stop='changeColor(1)'>
							<div class="closeColor_right_bj" :style="{'background':from.tagBg}">
								<!-- <yq-color-picker ref="colorPicker" @confirm="change($event,1)" /> -->
							</div>
							<image src="@/static/image/right.png" mode=""></image>

						</div>
					</div>

					<div class="closeColor">
						<div class="closeColor_left">
							文字颜色：
						</div>
						<div class="closeColor_right" @click.stop='changeColor(2)'>
							<div class="closeColor_right_wz" :style="{'background':from.tagTextColor}">
								<!-- <yq-color-picker ref="colorPicker" @confirm="change($event,2)" /> -->
							</div>
							<image src="@/static/image/right.png" mode=""></image>

						</div>
					</div>






				</div>
				<div class="closeColorBtn" @click.stop='addTag'>
					<div class="closeColorBtnCont">
						提交
					</div>
				</div>

			</div>
		</div>
		<!-- 底部选择 -->
		<div class="allMask" v-if='isRedMask' @click='isRedMask =false'>

		</div>
		<div class="redDB" v-if='isRedMask'>
			<div class="redDB_items" @click.stop='closeEvent(1)'>
				手动标签
			</div>
			<div class="redDB_items" @click.stop='closeEvent(2)'>
				条件标签
			</div>
			<div class="redDB_items_btn redDB_items" @click='isRedMask = false'>
				取消
			</div>
		</div>
		<!-- 选择颜色 -->
		<div class="colorCloseBj" v-if="isColorMask">
			<!-- <color @change='change' @close='isColorMask = false'></color> -->

		</div>
		<yq-color-picker ref="colorPicker" v-if="closeColor == 1" @confirm="change($event,1)" />
		<yq-color-picker ref="colorPickers" v-if="closeColor == 2" @confirm="change($event,2)" />
	</div>
</template>

<script>
	import color from './color.vue'
	export default {
		components: {
			color
		},
		props: {
			eitFrom: [Object, String, Array],
			random:[Object, String, Array,Number],
		},
		watch: {
			eitFrom(newVal, oldVal) {
				this.getTagDetail(newVal)
			},
			random(newVal, oldVal){
				this.randomNum(newVal)
			}
		},
		data() {
			return {
				isRedMask: false,
				isColorMask: false,
				from: {
					extend: {
						config: [{
								value: 1,
								switchType: 1,
								switchStatus: 2
							},
							{
								value: 0.01,
								switchType: 2,
								switchStatus: 2
							}, {
								value: 1,
								switchType: 3,
								switchStatus: 2
							}
						],
						ruleType: 1,
					},
					name: "",
					tagBg: "#aNfd98",
					tagTextColor: "#aNfd98",
					tagType: 1,
				},
				closeColor: 1,
				isEit: false,
				moColorList: [{
					bj: '#2B9CFF',
					text: '#ffffff'
				}, {
					bj: '#FF5A5F',
					text: '#ffffff'
				}, {
					bj: '#00DDBA',
					text: '#07643C'
				}, {
					bj: '#AEC0FE',
					text: '#0E33B1'
				}, {
					bj: '#FFD7E7',
					text: '#FF5A5F'
				}, {
					bj: '#0975E0',
					text: '#ffffff'
				}, {
					bj: '#566C02',
					text: '#A6FF5A'
				}, {
					bj: '#FE6637',
					text: '#ffffff'
				}, {
					bj: '#1BB05E',
					text: '#FFE8C8'
				}, {
					bj: '#1B50B0',
					text: '#FFE1B6'
				}]
			}
		},
		mounted() {
			if (this.eitFrom) {
				this.getTagDetail(this.eitFrom)
			}
			this.randomNum(this.random)
		},
		methods: {
			// 
			randomNum(num){
				this.from.tagTextColor = this.moColorList[num].text
				this.from.tagBg = this.moColorList[num].bj
			},
			// 选择标签类型
			closeEvent(type) {
				this.from.tagType = type
				this.isRedMask = false
			},
			// 打开选择器
			changeColor(index) {
				this.closeColor = index
				this.isColorMask = true
				console.log('1111', index)
				if (index == 1) {
					this.$refs.colorPicker.open();
				} else {
					this.$refs.colorPickers.open();
				}
				// this.$refs.colorPicker.open();
			},
			// 选择颜色
			change(color, idx) {
				console.log('color', color, idx)
				if (color == '请旋转取色') return
				this.closeColor == 1 ? this.from.tagBg = color : this.from.tagTextColor = color
				this.isColorMask = false

			},
			// 确认创建
			async addTag() {
				console.log(this.from)
				if (!this.from.name) return uni.showToast({
					title: '请输入标签名称',
					icon: 'none'
				})
				const params = JSON.parse(JSON.stringify(this.from))
				if (params.tagType == 1) {
					params.extend = null
				} else {
					params.extend.ruleType = Number(params.extend.ruleType)
					// 便利转换单位
					for (var i in params.extend.config) {
						if (i == 1) {
							params.extend.config[i].value = Number(params.extend.config[i].value) * 100
						} else if (i == 0) {
							params.extend.config[i].value = Number(params.extend.config[i].value) * 60
						} else {
							params.extend.config[i].value = Number(params.extend.config[i].value) * 24 * 3600
						}
					}
					if (params.extend.config.every((item) => item.switchStatus !== 1)) {
						return uni.showToast({
							title: '生效规则中至少选中一个条件',
							icon: 'none'
						})
					}
				}
				// 判断是否是新增还是编辑
				var api = ''
				if (this.isEit) {
					api = this.$Api.tagUpdate
				} else {
					api = this.$Api.tagCreate
				}
				const {
					data
				} = await this.$request(api, params, "post")
				if (data.code !== 200) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.backEvent()
				console.log(this.from.name)
			},
			backEvent() {
				this.$emit('backEvent')
			},
			// 关闭
			backCloseEvent() {
				this.$emit('backCloseEvent')
			},
			// 选择条件
			changeSwitchStatusEvent(idx) {
				console.log("选择条件", idx)
				this.from.extend.config[idx].switchStatus == 1 ? this.from.extend.config[idx].switchStatus = 2 : this.from
					.extend.config[idx]
					.switchStatus = 1
			},
			// 获取标签详情
			async getTagDetail(e) {
				if (!e.tagId) return
				this.isEit = true
				const {
					data
				} = await this.$request(this.$Api.tagDetail, {
					tagId: e.tagId
				}, "get")
				if (data.code != 200) return
				const params = data.data
				if (params.extend != null && params.extend) {
					for (var i in params.extend.config) {
						if (i == 1) {
							params.extend.config[i].value = Number(params.extend.config[i].value) / 100
						} else if (i == 0) {
							params.extend.config[i].value = Number(params.extend.config[i].value) / 60
						} else {
							params.extend.config[i].value = Number(params.extend.config[i].value) / 24 / 3600
						}
					}
				}
				this.from = params
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .picker-slot {
		opacity: 0;
	}
	::v-deep .uni-input-input{
		text-align: right;
	}

	::v-deep .change-button {
		display: none !important;
	}
	.placeholders{
		text-align: right;
	}
	.tagMask{
		width: 100%;
		height: 100%;
		// background:red;
		backdrop-filter: blur(1px);
		position: fixed;
		left: 0;
		top: 0;

	}

	.prizeDraw {
		width: 100%;
		height: 992rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		// overflow-y: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 32rpx;
		box-sizing: border-box;
		color: #464C5B;
		font-size: 28rpx;

		.prizeDraw_top {
			width: 100%;
			height: 100rpx;
			position: relative;
			text-align: center;
			font-size: 32rpx;
			line-height: 100rpx;

			.prizeDraw_top_close_left {
				position: absolute;
				left: 0;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.closeImg {
				position: absolute;
				right: 0;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}

		}

		.prizeDraw_top_title {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 80rpx;
		}

		.prizeDraw-cont {
			height: 682rpx;
			width: 100%;
			overflow-y: scroll;

			.tag_title {
				display: flex;
				align-items: center;
				position: relative;
				height: 80rpx;
				margin-bottom: 40rpx;
				text-align: right;
				input {
					text-align: right;
				}
				.prefix {
					color: #464C5B;
					font-size: 28rpx;

					span {
						color: #464C5B;
						font-size: 28rpx;
					}
				}

			}

			.tagTj {
				width: 100%;
				min-height: 328rpx;
				background: #F5F9FF;
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #464C5B;
				padding: 0rpx 16rpx 16rpx 16rpx;


				.tagTj_top {
					display: flex;
					align-items: center;
					margin-right: 34rpx;
					zoom: 0.95;
				}

				.tagTj_cont {
					.tagTj_cont_items {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 64rpx;
						margin-bottom: 16rpx;
						height: 65rpx;
						box-sizing: border-box;


						.tagTj_cont_left {
							display: flex;
							align-items: center;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 24rpx;
							}
						}

						.tagTj_cont_right {
							display: flex;
							align-items: center;
							width: 240rpx;

							input {
								width: 166rpx;
								height: 64rpx;
								background: #FFFFFF;
								border-radius: 8rpx;
								border: 2rpx solid #D7DDE4;
								padding: 0 32rpx;
								box-sizing: border-box;
								margin-right: 16rpx;
							}
						}
					}
				}
			}

			.closeColor {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60rpx;
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #464C5B;

				.closeColor_right {
					display: flex;
					align-items: center;
					width: 200rpx;
					justify-content: flex-end;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.closeColor_right_bj {
						width: 66rpx;
						height: 66rpx;
						background: #BCD0FF;
						border-radius: 12rpx;
						border: 2rpx solid #979797;
					}

					.closeColor_right_wz {
						width: 66rpx;
						height: 66rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						border: 2rpx solid #979797;

					}
				}
			}


		}


	}

	.closeColorBtn {
		width: 100%;
		position: fixed;
		left: 0rpx;
		bottom: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;

		.closeColorBtnCont {
			width: 552rpx;
			height: 80rpx;
			background: #295FFF;
			border-radius: 46rpx;
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
			z-index: 999;
		}
	}

	::v-deep .u-text__value--tips {
		color: #464C5B;
		font-size: 28rpx;
	}

	.redDB {
		width: 100%;
		height: 360rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 99;

		.redDB_items {
			width: 750rpx;
			height: 112rpx;
			background: #FFFFFF;
			font-size: 34rpx;
			color: #000;
			text-align: center;
			line-height: 112rpx;
			border: 1rpx solid #F2F2F2;
		}

		.redDB_items_btn {
			border: none;
			border-top: 16rpx solid #F2F2F2;


		}
	}

	.colorCloseBj {
		width: 100%;
		position: absolute;
		top: 10%;
		left: 0;
	}

	.noBorder {
		border: none !important;
	}

	.isEitBox {
		width: 100%;
		height: auto;
		// overflow: scroll;
		position: relative;
	}

	.isEitBoxCont {
		width: 100%;
		height: 100%;
		opacity: 0.5;
		position: absolute;
		z-index: 9;
		background: #fff;
	}
</style>
